<script lang="ts" setup>
import type { FormInstance } from 'ant-design-vue'
import { cloneDeep } from 'lodash'
import type { CustomerModel } from '@/api/customer/customer-list.ts'
import {createCustomerInfo, updateCustomerInfo} from '@/api/customer/customer-list.ts';
import {CascaderProps, notification} from 'ant-design-vue';
import {getProvincesCities} from "@/api/common/common.ts";

const emit = defineEmits(['cancel', 'ok'])

const isUpdate = ref(false)

const visible = ref(false)

const title = computed(() => {
  return isUpdate.value ? '编辑' : '新增'
})

const formRef = ref<FormInstance>()

const formData = ref<CustomerModel>({
  name: '',
  gender: 0,
  description: '',
  provinceId: 0,
  cityId: 0,
  address:'',
})

const labelCol = { style: { width: '100px' } }
const wrapperCol = { span: 24 }

function open(record?: CustomerModel) {
  visible.value = true
  isUpdate.value = !!record?.customerId
  formData.value = cloneDeep(record) ?? {
    name: '',
    gender: 0,
    description: '',
    provinceId: 0,
    cityId: 0,
    address:'',
  }
}

async function handleOk() {

  try {
    await formRef.value?.validate()
    // 如果是编辑，则进入编辑调用接口
    if (isUpdate.value){
      console.log(formData.value)
      // 进入新增接口
      const res = await updateCustomerInfo(formData.value)
      if (res.code == 200){
        notification.success({
          message: '修改完成',
          duration: 3,
        })
        visible.value = false
      }else {
        notification.error({
          message: res.msg,
          duration: 3,
        })
      }
      visible.value = false
    }else {
      console.log(formData.value);
      // 进入新增接口
      const res = await createCustomerInfo(formData.value)
      if (res.code == 200){
        notification.success({
          message: '添加成功',
          duration: 3,
        })
        visible.value = false
      }else {
        notification.error({
          message: res.msg,
          duration: 3,
        })
      }
    }
  }
  catch (errorInfo) {
    console.log('Form Validate Failed:', errorInfo)
  }
}

function handleCancel() {
  formRef.value?.resetFields()
  emit('cancel')
}

// 省市区所有数据
const allAreasList = shallowRef<CascaderProps>([])


async function init() {
  try {
    const { data } = await getProvincesCities()
    allAreasList.value = data ?? []
  }
  catch (e) {
    console.log(e)
  }
}

const changeArea = (vl: any) => {
  formData.value.provinceId = vl[0]?? 0;
  formData.value.cityId = vl[1]?? 0;
}

defineExpose({
  open,
})
const value1 = ref<string>('1');
onMounted(() => {
  init()
})
</script>

<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
    <a-form ref="formRef" :model="formData" class="w-full" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item name="customerType" label="客户类型" :rules="[{ required: true, message: '请选择客户类型' }]">
        <a-radio-group v-model:value="formData.customerType">
          <a-radio-button :value="1">采购客户</a-radio-button>
          <a-radio-button :value="2">销售客户</a-radio-button>
        </a-radio-group>
<!--        <a-select v-model:value="formData.customerType" placeholder="请选择客户类型">
          <a-select-option value='1'>
            采购客户
          </a-select-option>
          <a-select-option value='2'>
            销售客户
          </a-select-option>
        </a-select>-->
      </a-form-item>
      <a-form-item name="name" label="姓名" :rules="[{ required: true, message: '请输入客户姓名' }]">
        <a-input v-model:value="formData.name" :maxlength="50" placeholder="请输入客户姓名" />
      </a-form-item>
      <a-form-item name="description" label="描述" :rules="[{ required: false, message: '请输入客户描述' }]">
        <a-input v-model:value="formData.description" :maxlength="50" placeholder="请输入仓库类型描述" />
      </a-form-item>
      <a-form-item label="性别" :rules="[{ required: true,}]" name="gender">
        <a-radio-group v-model:value="formData.gender">
          <a-radio :value="1">
            男
          </a-radio>
          <a-radio :value="2">
            女
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item name="province" label="省份/城市">
        <a-cascader :options="allAreasList" placeholder="请选择省份/城市" @change="changeArea"/>
      </a-form-item>
      <a-form-item name="address" label="详细地址" :rules="[{ required: false, message: '请输入详细地址' }]">
        <a-input v-model:value="formData.address" :maxlength="50" placeholder="请输入详细地址" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
